<template>
    <div style="width: 500px;">
    
    <el-upload
      class="avatar-uploader"
      action="http://localhost:8080/ocr/upload"
      :show-file-list="false"
      :auto-upload="true"
      :on-success="handleAvatarSuccess"
    >
      <img v-if="from.front" :src="from.front" class="avatar" style="width: 300px; height: 200px;" />
      <el-icon v-else class="avatar-uploader-icon">请上传身份证(正)</el-icon>
    </el-upload>
    
     <el-upload
      class="avatar-uploader"
      action="http://localhost:8080/ocr/upload"
      :show-file-list="false"
      :auto-upload="true"
      :on-success="handleAvatarSuccess01"
    >
    <img v-if="from.opposite" :src="from.opposite" class="avatar"  style="width: 300px; height: 200px;" />
    <el-icon v-else class="avatar-uploader-icon">+反面</el-icon>
  </el-upload>  
  
  

  <el-form :model="from" label-width="auto" style="max-width: 600px">
    <el-form-item label="姓名">
      <el-input v-model="from.name" />
        </el-form-item>
  </el-form>

  <!---证件号码-->
  <el-form :model="from" label-width="auto" style="max-width: 600px">
    <el-form-item label="证件号码">
      <el-input v-model="from.identity" />
    </el-form-item>
  </el-form>

  <!--有效日期--->
  <el-form-item label="日期">
      <el-col :span="11">
        <el-date-picker
          v-model="from.exp"
          type="date"
          placeholder="有效日期"
          style="width: 50%"
        />
        <el-date-picker
          v-model="from.ddl"
          type="date"
          placeholder="失效日期"
          style="width: 50%"
        />
      </el-col>
  </el-form-item>



    
    <el-button @click="subimt">提交</el-button>
  </div>
  </template>
  
  <script lang="ts" setup>
  import { onMounted, ref } from 'vue'
  import { ElMessage } from 'element-plus'
  import { useTokenStore } from '@/stores/token'
  import type { UploadProps } from 'element-plus'
import { shiming, shiminginfo } from '@/api/user';
import gerenxq, { farenxq } from '@/api/merchant/gerenxq';
//定义路游器
import { useRouter } from "vue-router";
const router = useRouter();
  //定义图片(正)
  const imageUrl = ref('')
  //定义图片(反)
  const imageUrl01=ref('')

  //定义表单
  const from=ref({
    front:'',
    opposite:'',
    name:'',
    identity:'',
    exp:'',
    ddl:''
  });

  //图片回显
  const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
  ) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    from.value.front=response.shuju;
    console.log(from)
  }
  //图片回显
  const handleAvatarSuccess01: UploadProps['onSuccess'] = (
    response,
    uploadFile
  ) => {
    imageUrl01.value =  URL.createObjectURL(uploadFile.raw!)
    from.value.opposite=response.shuju;

    console.log(from)
  }
  
  //提交
  const subimt=()=>{
tijiao();
  }
  //提交的方法
  const tijiao=async()=>{
    from.value.sanhulei=1;
    from.value.merchantid=useTokenStore().token.id;
    let tijiao01=await shiming(from)
    if(tijiao01){
      ElMessage.success("添加成功")
  }else{
    ElMessage.error("添加失败")
  }
}
//实名认证
const rz=async(id)=>{
  const rz01=await shiminginfo(id);
  if(rz01.flag){
    from.value=rz01.shuju;
    imageUrl.value=from.value.front;
    imageUrl01.value=from.value.opposite;
  }
  console.log(rz01)
}
//钩子函数
onMounted (()=>{
  rz(useTokenStore().token.cardId);
})

  </script>
  
  <style scoped>

  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  </style>
  
  <style>
  .avatar-uploader .el-upload {
    border: 3px dashed var(--el-border-color);
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  
  .el-icon.avatar-uploader-icon {
    font-size: 30px;
    color: red;
    width: 200px;
    height: 200px;
    text-align: center;
  }
  </style>
  